<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
<meta charset="utf-8">
<title>组群聊-群聊页</title>
<link href="../c/base.css" rel="stylesheet" type="text/css">
<link href="../c/toefl.css" rel="stylesheet" type="text/css">
<link href="../c/bootstrap.min.css" rel="stylesheet" type="text/css">
<script src="../j/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>


<div class="doc1180 fn-clear">
    <input id="username"  th:value="${session.sess_user.login_name}" type="hidden"/>
    <div class="crumbs_patch" th:switch="${session.sess_chatroom.group_type}">
        <a href="###" th:case="1">同城考试群</a>
        <a href="###" th:case="2">考试场次群</a>
        <a href="###" th:case="3">名师学堂群群</a>
        <a href="###" th:case="4">名师备考群</a>》
        <a href="###" th:text="${session.sess_chatroom.group_name}"></a>》
        <span>群聊</span>
	</div>
    <!--页面左侧内容-->
    <div class="tfr_left">
    	<div class="zql_Top">
        	<ul>
            	<li class="zql_TopPic"><img th:src="${session.sess_chatroom.img_url}" width="82" height="82"></li>
                <li class="zql_TopText">
                	<div class="zql_TopTitle" th:text="${session.sess_chatroom.group_name}"></div>
                    <div class="zql_TopTime">
                    	<span>建群时间：[[${#dates.format(session.sess_chatroom.create_time,'yyyy-MM-dd')}]]</span>|<span>在线人数:<b class="blue"></b></span>
                    </div>
                </li>
                <li class="zql_TopButton">
                	<a class="btn btn-primary" th:href="@{/toGroupDetails(id=${session.sess_chatroom.group_id})}">查看群组详情</a>
                </li>
            </ul>
        </div>
        <div class="zql_Body"></div>
        <div class="zql_Bottom" style="margin-top: 10px">
        	<div><input name="" type="text" class="zql_BottomTitle" readonly="readonly"></div>
            <div><textarea name="" id="msg" cols="" rows="" class="zql_BottomInput"></textarea></div>
            <div class="paddingT20 fn-clear"><a href="###" class="zql_BottomButton" onclick="sendMsgToServer()">发送</a></div>
        </div> 
  </div>
    <!--页面左侧内容 end-->
  	<!--页面右侧内容-->
	<div class="doc280 fn-right">
        <div class="index_itemR">
            <div class="index_itemRtitle">
                <h3>本群群主</h3>
            </div>
            <div class="zql_bqgl">
                <ul>
                    <li><img th:src="${session.sess_chatroom.teacher.img_url}" width="60" height="60"></li>
                </ul>
            </div>
		</div>
        <div class="index_itemR">
            <div class="index_itemRtitle">
                <h3>本群管理员</h3>
            </div>
            <div class="zql_bqgl">
                <ul th:each="u:${session.sess_groupadmins}">
                    <li th:each="t:${u.user}"><img th:src="${t.img_url}" width="60" height="60">
                        <div th:if="${t.login_name==session.sess_user.login_name}">
                            <input   id ="admin" type="hidden" th:value="${t.login_name}">
                        </div>
                    </li>

                </ul>
            </div>
		</div>
        <div class="index_itemR">
            <div class="index_itemRtitle">
                <h3>本群成员</h3>
            </div>
            <div >
                <ul th:each="u:${session.sess_groupusers}">
                    <li th:each="t:${u.user}"><img th:src="${t.img_url}" width="60" height="60"></li>

                </ul>
            </div>
		</div>
	</div>
	<!--页面右侧内容 end-->
  
</div>
<script th:inline="javascript">


    function getNow(s) {
        return s < 10 ? '0' + s: s;
    }
    var date =new Date();
    var hour =date.getHours();
    var min =date.getMinutes();
    function getWebSocket() {

        var webSocket = new WebSocket('ws://localhost:8080/tochat');
        /**
         * 当服务端打开连接
         */
        webSocket.onopen = function (event) {
            console.log('WebSocket打开连接');
        };

        /**
         * 当服务端发来消息：1.广播消息 2.更新在线人数
         */
        webSocket.onmessage = function (event) {

            console.log('WebSocket收到消息：%c' + event.data, 'color:green');
            //获取服务端消息
            var message = JSON.parse(event.data) || {};
            var $messageContainer = $('.zql_Body');
            //聊天


            if (message.type === 'SPEAK') {
                $messageContainer.append(
                 '<dl>'+
                '<dt class="zql_BodyPic"><img src='+message.imgu+'></dt>'+
                    '<dd class="zql_BodyText">'+
                    '<div class="zql_BodyTitle" style="font-size: 15px">'+
                    '<span>'+message.username+'</span>'+
                     getNow(hour)+':'+getNow(min)+
                    '<div style="float: right; font-size: 15px">'+
                    '</div> </div>'+
                    '<div class="zql_BodyT">'+
                    '<p>'+message.msg+'</p> </div>'+
                    '</dd> </dl>');

            };



            $('.blue').text(message.onlineCount);
            var un =$("#username").val();
           var a= [[${session.loginMessage}]];






        };
        /**
         * 关闭连接
         */
        webSocket.onclose = function (event) {
            console.log('WebSocket关闭连接');
        };

        /**
         * 通信失败
         */
        webSocket.onerror = function (event) {
            console.log('WebSocket发生异常');

        };
        return webSocket;
    }

    var webSocket = getWebSocket();

    /**
     * 通过WebSocket对象发送消息给服务端
     */
    function sendMsgToServer() {
        var $message = $('#msg');
        var kk =[[${session.sess_user.img_url}]];
        if ($message.val()) {
            webSocket.send(JSON.stringify({username: $('#username').val(), msg: $message.val(), imgu:kk}));
            $message.val(null);
        }

    }
    /**
     * 使用ENTER发送消息
     */
    document.onkeydown = function (event) {
        var e = event || window.event || arguments.callee.caller.arguments[0];
        e.keyCode === 13 && sendMsgToServer();
    };
</script>
</body>
</html>
